<template>
	<view>
		<TopNav title="塘口列表"></TopNav>
		<SearchMenu @search="handleSearch" @reset="handleReset" :list="list" :sortOption="sortOption">
			<template v-slot:search>
				<van-cell title="塘口">
					<van-field v-model="queryParams.culturePondName" placeholder="输入塘口名称查询" :border="false"
						input-align="right" class="padding-none" />
				</van-cell>
			</template>
		</SearchMenu>

		<view class="cu-card case">
			<view class="cu-item shadow padding" v-for="item in list" :key="item.culturePondId"
				@click="handleToPage('detail',item)">
				<view class="flex align-center">
					<view class="shrink-0 padding-right">
						<text class="text-xxl text-bold"
							:class="[pondStatusStyle(item)]">{{item.culturePondName}}</text>
					</view>
					<view class="flex-1">
						<view class="flex justify-between padding-bottom-xs">
							<view class="">
								<text class="text-gray">类型：</text>
								<text>{{item.typeName}}</text>
							</view>
							<view class="">
								<text class="text-gray">面积：</text>
								<text>{{item.area || '-'}}亩</text>
							</view>
						</view>
						<view class="">
							<text class="text-gray">所属基地：</text>
							<text>{{item.productionBaseName}}</text>
						</view>
						<view class="text-cut full-width overflow-hidden  padding-top-xs">
							<text :class="[pondStatusStyle(item)]">{{item.culturePondStatusInfo}}</text>
						</view>
					</view>
				</view>

			</view>
		</view>
		<u-loadmore :status="loadStatus" @loadmore="getMoreList" v-if="list.length" />
		<van-empty description="暂无数据" v-if="!list.length" />
	</view>
</template>

<script>
	import {
		listSelect as list
	} from '@/api/mine/pond'
	import mixins from "@/mixins"
	export default {
		mixins: [mixins],
		data() {
			return {
				baseUrl: getApp().globalData.config.baseUrl,
				list: [],
				loadStatus: 'loadmore',
				sortOption: [{
						text: '日期排序',
						value: 'createTime',
						rule: 'date'
					},
					{
						text: '状态排序',
						value: 'culturePondStatus',
						rule: ['异常', '正常', '空闲', ]
					}
				],
				queryParams: {
					startDate: '',
					endDate: '',
					culturePondName: '',
					productionBaseId: undefined,
					pageSize: 10,
					pageNum: 1
				},

			};
		},
		onShow() {
			this.queryParams.productionBaseId = this.$store.state.user.baseInfo.id
			this.getList()
		},
		onReachBottom() {
			if (this.loadStatus === 'nomore') return
			this.queryParams.pageNum += 1
			this.getList()
		},
		methods: {
			pondStatusStyle(obj) {
				let style = 'text-blue'
				switch (obj.culturePondStatus) {
					case '正常':
						style = 'text-green'
						break;
					case '异常':
						style = 'text-red'
						break;
				}
				return style
			},
			handleToPage(path, params) {
				switch (path) {
					case 'detail':
						this.$tab.navigateTo('./detail?id=' + params.culturePondId)
						break;
				}
			},
			getList() {
				list(this.queryParams).then(res => {
					this.listFormat(res)
				})
			},
			getMoreList() {
				this.queryParams.pageNum += 1
				this.getList()
			},
			handleReset(query) {
				this.queryParams = {
					startDate: '',
					endDate: '',
					culturePondName: '',
					productionBaseId: this.$store.state.user.baseInfo.id,
					pageSize: 10,
					pageNum: 1,
					submitMark: true,
					...query
				}
				this.getList()
			},
			handleSearch(query) {
				this.queryParams = {
					...this.queryParams,
					...query,
					pageNum: 1
				}
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.text-width {
		width: 45px;
		display: inline-block;
	}
</style>